<template>
    <el-dialog title="切换门店" :visible.sync="switchShopVisible" :before-close="closeDialog" center @open="upload">
      <el-radio-group v-model="shopId">
          <el-radio  v-for="shop in shops" :label="shop.shop_id" :key="shop.shop_id" @change="handleShopChange(shop)" >{{shop.shop_name}}</el-radio>
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" round @click="uploadShop" class="button-certain">确 定</el-button>
      </div>
    </el-dialog>

</template>

<script>
    export default {
        name: "chooseShopDailog",
        props:["switchShopVisible","currentShop","shops"],
        data(){
          return{
            shopId:'',
            shopName:'',
            checkedCities:''
          }
        },

        methods:{
          upload(){
            var self = this;
            this.shopId = this.currentShop;
            const curShopIndex = this.shops.findIndex((value,index,arr)=>{
              return value.shop_id == self.currentShop;
            });
            this.shopName = this.shops[curShopIndex].shop_name;
          },
          closeDialog() {
            this.$emit('closeChooseShop');
          },
          handleShopChange(row){
            this.shopId = row.shop_id;
            this.shopName = row.shop_name;
          },
          uploadShop(){
            this.$emit('upload',{
              shop_name:this.shopName,
              shop_id:this.shopId
            });
          }
        }
    }
</script>

<style scoped>

  .button-certain {
    background: #FF679E;
    border-color:#FF679E;
    border-radius: 101px;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #FFFFFF;
    letter-spacing: 0;
    padding: 10px 30px;
  }
</style>
